<template>
  <PublicPage page-name="导师奖励" :borderType="true">
    <scroll-view
      ref="scrollView"
      scroll-y="true"
      class="mentorReward_layout_box"
      @scrolltolower="scrolltolowerFn"
      -webkit-overflow-scrolling="touch"
      >
      <view class="mentorReward_msg_box">
        <view class="fw6 tc">待获得导师奖励</view>
        <view class="themeFontColor fw6 fz-32 tc u-m-t-16">{{routeData.waitTutorReward || 0}}<text class="fz-12">元</text></view>
      </view>

      <!-- 数据列表 -->
      <view class="friends_list_box friends_list_box_two u-m-b-24" v-for="(friend, index) in friendList" :key="index" v-if="friendList.length>0">
        <!-- 好友列表 -->
        <view class="user_list_box user_list_not_b">
          <view class="user_msg_l">
            <image class="user_head_img" mode="aspectFill" :src="friend.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" alt="">
            <view class="user_name">
              <view class="name_box"><view class="communityName_box">{{friend.communityName}}</view>  </view>
              <view class="fz-12 viceColor">累计贡献：<text class="themeFontColor u-m-l-6">￥{{friend.contributeAmount}}</text></view>
            </view>
          </view>
          <view class="user_msg_r">
            <view class="remind_box">
              <button class="red_btn remind_btn_box fz-12" open-type="share" id="shareIndexId">提醒开团</button>
            </view>
            <view class="fz-12 viceColor">有效期剩余：{{friend.effectiveDay}}天</view>
          </view>
        </view>
        <!-- 红包数据 -->
        <view class="mentor_redBag_box">
          <view class="mentor_redBag_tit">
            <view v-if="friend.lackFollowGroupCount>0">差{{friend.lackFollowGroupCount}}人跟团你可再得<text class="themeFontColor" v-if="friend.availableAmount">¥{{friend.availableAmount}}</text></view>
             <view class="items-center viceColor" v-else>已获得全部奖励</view>
            <view class="items-center viceColor" v-if="friend.operateType" @click="operateFn(index)">收起<i class="iconfont icon-arrow_up fz-14 u-m-t-4" /></view>
            <view class="items-center viceColor" v-else  @click="operateFn(index)">展开<i class="iconfont icon-arrow_down fz-14 u-m-t-4" /></view>
          </view>

          <view class="redBag_list_box u-p-t-24" v-if="friend.operateType">
            <view class="redBag_msg_box">
              <view class="redBag_box" :class="{'redBag_box_is':friend.tutorRewardListRespVOList[0].isReceive==1}">
                <view class="amount_box">{{friend.tutorRewardListRespVOList[0].rewardAmount || 5}}<text class="fz-12">元</text></view>
              </view>
              <view class="fz-10 viceColor tc">{{friend.tutorRewardListRespVOList[0].isReceive==1?"已领取":"10人跟团"}}</view>
            </view>
            <view class="icon-arrow_box u-p-t-38"><i class="iconfont icon-arrow_right fz-12" /></view>
            <view class="redBag_msg_box">
              <view class="redBag_box" :class="{'redBag_box_is':friend.tutorRewardListRespVOList[1].isReceive==1}">
                <view class="amount_box">{{friend.tutorRewardListRespVOList[1].rewardAmount || 15}}<text class="fz-12">元</text></view>
              </view>
              <view class="fz-10 viceColor tc">{{friend.tutorRewardListRespVOList[1].isReceive==1?"已领取":"50人跟团"}}</view>
            </view>
            <view class="icon-arrow_box u-p-t-38"><i class="iconfont icon-arrow_right fz-12" /></view>
            <view class="redBag_msg_box">
              <view class="redBag_box" :class="{'redBag_box_is':friend.tutorRewardListRespVOList[2].isReceive==1}">
                <view class="amount_box">{{friend.tutorRewardListRespVOList[2].rewardAmount || 30}}<text class="fz-12">元</text></view>
              </view>
              <view class="fz-10 viceColor tc">{{friend.tutorRewardListRespVOList[2].isReceive==1?"已领取":"200人跟团"}}</view>
            </view>
            <view class="icon-arrow_box u-p-t-38"><i class="iconfont icon-arrow_right fz-12" /></view>
            <view class="redBag_msg_box">
              <view class="redBag_box" :class="{'redBag_box_is':friend.tutorRewardListRespVOList[3].isReceive==1}">
                <view class="amount_box">{{friend.tutorRewardListRespVOList[3].rewardAmount || 150}}<text class="fz-12">元</text></view>
              </view>
              <view class="fz-10 viceColor tc">{{friend.tutorRewardListRespVOList[3].isReceive==1?"已领取":"1000人跟团"}}</view>
            </view>
            <view class="icon-arrow_box u-p-t-38"><i class="iconfont icon-arrow_right fz-12" /></view>
            <view class="redBag_msg_box">
              <view class="redBag_box" :class="{'redBag_box_is':friend.tutorRewardListRespVOList[4].isReceive==1}">
                <view class="amount_box">{{friend.tutorRewardListRespVOList[4].rewardAmount || 400}}<text class="fz-12">元</text></view>
              </view>
              <view class="fz-10 viceColor tc">{{friend.tutorRewardListRespVOList[4].isReceive==1?"已领取":"3000人跟团"}}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 无数据-缺省頁 -->
      <DefaultPage
        tips="暂时还没有待获得导师奖励"
        :custoBtn="true"
        type="2"
        :minusHeight="162"
        v-if="!friendList || friendList.length<1"
      >
        <view class="u-flex">
          <button class="red_btn lack_invitation_btn" open-type="share">
            立即邀请赚奖金
          </button>
        </view>
      </DefaultPage>
    </scroll-view>
  </PublicPage>
</template>

<script>
import PublicPage from "@/components/publicPage/index.vue"
import DefaultPage from "@/components/defaultPage/index.vue"
import pullNew from "@/api/pullNew.js"
export default {
  components: {
    PublicPage,
    DefaultPage
  },
  data () {
    return {
      routeData: {},
      friendList: [],
      getParams: {
        currentPage: 1,
        pageSize: 10,
        finish: false, // 是否还有更多
      },
    }
  },
  onLoad (res) {
    this.routeData = {
      ...this.routeData,
      ...res,
    }
    this.getTutorRewardPageFn()
  },
  onShow () {
    // 禁用菜单的分享按钮
    wx.hideShareMenu({
      menus: ["shareAppMessage"]
    })
  },
  onShareAppMessage(res) {
    let userInfo = this.$store.state.userInfo
    let _shareObj = {
      title: '超好用的社群分销工具，视频带货出单快，全场功能免费用！',
      imageUrl: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/share_pullNew_img.png',
      path: `/pagesB/pullNew/landingPage?idCode=${userInfo.idCode}`
    }
    if(res.from === 'button') {
      if (res.target.id == 'shareIndexId') {
        _shareObj = {
          title: '我发现了一个超好用的视频帮卖小程序！快来一起玩转私域流量！',
          imageUrl: `https://image.qqpyyds.com/mpAppImg/bgImg/homePageShare_img.png?t=${Date.parse(new Date())}`,
          path: `/pages/index/index?idCode=${userInfo.idCode}`
        }
      }
    }
    console.log(JSON.parse(JSON.stringify({_shareObj})), '分享参数打印')
    return _shareObj
  },
  methods: {
    operateFn (index) {
      this.friendList[index].operateType = !this.friendList[index].operateType
    },
    async getTutorRewardPageFn () { //好友列表数据
      if (this.getParams.finish) return
      const { data } = await pullNew.getTutorRewardPage(this.getParams)
      if (data.records&&data.records.length>0) {
        data.records.forEach((item, i) => { // 处理image为字符串的问题
          data.records[i] = {
            ...data.records[i],
            operateType: false, // 添加一个字段来判断展开收起
          }
        })
      }
      this.friendList = this.getParams.currentPage === 1? data.records : this.friendList.concat(data.records)
      this.getParams.finish = (data.records.length<this.getParams.pageSize)?true:false
    },
    scrolltolowerFn () {
      if (this.getParams.finish) return
      this.getParams.currentPage = Number(this.getParams.currentPage)+1
      this.getTutorRewardPageFn()
    },
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>